<template>
    <!-- 委托列表 -->
    <div>
<!--        <div class="flex justify-between" v-if="listData.length">-->
<!--            <div class="flex" @click.stop="changeIcon">-->
<!--                <img v-show="!iconShow" src="../../assets/image/public/grey-rounded.png" alt="" class="w-38 h-38"/>-->
<!--                <img v-show="iconShow" src="../../assets/image/public/blue-rounded.png" alt="" class="w-38 h-38"/>-->
<!--                <div class="ml-37">{{ $t('隐藏其它合约') }}</div>-->
<!--            </div>-->
<!--            <button class="border-none all-cancel-btn pl-34 pr-34 pt-10 pb-10 font-25" @click="recallAll">{{ $t('全部撤销') }}</button>-->
<!--        </div>-->
        <template v-if="listData.length > 0">
          <div class="border-b-color" v-for="item in listData" :key="item.order_no">
            <div class="flex justify-between pt-34 pb-19">
              <div class="flex flex-col">
                <div class="flex items-center">
                  <div class="font-31"
                       :class="item.direction=='buy'?' text-green':'text-red'">
                    {{handleWord(item.direction, item.offset, item.order_price_type)}}
                  </div>
                  <div class="ml-40 font-31 font-600 textColor">{{ item.name }}</div>
                </div>
              </div>
              <div class="text-grey font-26 flex flex-col justify-between">
                {{ item.create_time }}
              </div>
            </div>
            <div class="flex justify-between pb-34">
              <div class="flex items-center flex-between">
                <div>
                  <van-circle  v-model="currentRate" :rate="(1 - item.volume / item.volume_open * 100)" :speed="100" :text="text" :layer-color="'#EAEBEF'" :stroke-width="60" :size="'65px'"/>
                </div>
                <div class="ml-62">
                  <div class="flex items-center">
                    <div class="text-grey">
                      <div>{{ $t('数量') }}</div>
                      <!-- <di(USDT)v></div> -->
                    </div>
                    <div class="ml-25 font-26 textColor">{{item.volume_open - item.volume}}/{{ item.volume_open }}</div>
                  </div>
                  <div class="flex mt-35 items-center">
                    <div class="text-grey">{{ $t('价格') }}</div>
                    <div class="ml-25 font-26 textColor">{{ item.price }}</div>
                  </div>
                </div>
              </div>
              <div class="btn-wrap mt-75">
                <button class="order-btn textColor4 borderMain bg-white greyBg" @click.stop="goDetail(item)">
                  {{ $t('详情') }}</button>
                <button class="ml-19 order-btn border-none greyBg textColor" @click.stop="cancelSingle(item.order_no)">
                  {{ $t('撤单') }}</button>
              </div>
            </div>
          </div>
        </template>
<!--        <div class="text-grey text-center py-300" v-if="!listData.length">{{ $t('还没有委托') }}</div>-->
    </div>
</template>

<script>
import { Circle } from "vant";
import { _recallOrder, _recallOrderBatch } from "@/API/trade.api";
export default {
    name:"perpetualEntrustList",
    components:{
        [Circle.name]:Circle
    },
    props: {
        listData: {
            type: Array,
            default() {
                return []
            }
        }
    },
    data() {
        return {
            currentRate: 0,
           //委托列表
        //    entrustData:[
        //     { name:"BTC/USDT",create_time:"2022-04-05 22：10：31",direction:"buy",amount:"200",price:"23000"},
        //     { name:"ETH/USDT",create_time:"2022-04-05 22：10：31",direction:"sell",amount:"30",price:"1500"},
        //    ],
           iconShow:false,
        }
    },
    computed: {
        text() {
            return this.currentRate.toFixed(0) + '%';
        },
    },
    mounted() {
    },
    methods:{
        handleWord(direction, offset, price_type) {
          let a = ''
          let b = ''
          if(price_type === 'limit') {
           a= this.$t('限价')
          } else {
            a = this.$t('市价')
          }
          if (direction === 'buy' && offset === 'open') {
            b = this.$t('开多')
          } else if ( direction === 'sell' && offset === 'open') {
            b = this.$t('开空')
          } else if (direction === 'buy' && offset === 'close') {
            b = this.$t('平多')
          } else {
            b = this.$t('平空')
          }
          return a + '/' + b
        },
        changeIcon() {
            this.iconShow = !this.iconShow;
        },
        goDetail(item) {
            this.$router.push({
                path:"/entrustDetail?order_no=" + item.order_no
            });
        },
        cancelSingle(order_no) {//撤销单个委托单
            _recallOrder(order_no).then(() => {
                this.$toast(this.$t('撤单成功'))
                this.$emit('recall', order_no)
            })
        },
        recallAll() { // 全部撤销
            _recallOrderBatch().then(() => {
                 this.$toast(this.$t('撤单成功'))
                this.$emit('recall')
            })
        }
    }
}
</script>
<style lang="scss">
.btn-wrap {
  display: flex;
  justify-content: center;
  align-content: center;
}
.order-btn {
  font-size: 26px;
  border-radius: 6px;
  height: 53px;
  line-height: 53px;
  padding: 0 20px;
  display: flex;
  align-content: center;
  justify-content: center;
}
.van-circle__text{
  color: $text_color;
}
</style>
